<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <template>
        <!-- 时间选择器开始 -->
        <div class="block">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            size="small"
          >
          </el-date-picker>
        </div>
        <!-- 时间选择器结束 -->

        <!-- 类型选择开始 -->
        <div class="block">
          <el-select v-model="applyType" placeholder="请选择类型" clearable size="small">
            <el-option label="提现" value="提现"> </el-option>
            <el-option label="充值" value="充值"> </el-option>
          </el-select>
        </div>
        <!-- 类型选择结束 -->

         <!-- 状态选择开始 -->
        <div class="block">
          <el-select v-model="status" placeholder="请选择状态" clearable size="small">
            <el-option label="未审核" value="未审核"> </el-option>
            <el-option label="通过" value="通过"> </el-option>
            <el-option label="不通过" value="不通过"> </el-option>
          </el-select>
        </div>
        <!-- 状态选择结束 -->

        <!-- 编号输入框开始 -->
        <div class="block">
          <el-input
            style="width: 140px"
            placeholder="申请人编号"
            v-model="userId"
            clearable
            width="100px"
            size="small"
          >
          </el-input>
        </div>
        <!-- 编号输入框结束 -->

        <!-- 查询按钮开始 -->
        <el-button type="success" size="small" @click="toQuery">查询</el-button>
        <!-- 查询按钮结束 -->
      </template>
    </div>
    <!-- 头部 -->

    <!-- table表格 -->
    <el-table :data="tableData" style="width: 100%" size="mini">
      <!-- 序号 -->
      <el-table-column type="index" label="序号" width="50px" align="center">
      </el-table-column>

      <!-- 申请人编号 -->
      <el-table-column
        prop="userId"
        label="申请人编号"
        align="center"
        width="80px"
      >
      </el-table-column>

      <!-- 申请时间 -->
      <el-table-column label="申请时间" align="center">
        <template slot-scope="scope">
          <span>{{
            scope.row.applyTime | dateFormat("{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>

      <!-- 变更类型 -->
      <el-table-column prop="applyType" label="变更类型" align="center">
      </el-table-column>

      <!-- 变更资金 -->
      <el-table-column prop="money" label="变更资金" align="center">
        <template slot-scope="scope">
          ￥<span style="color: red; font-size: 20px">{{
            scope.row.money
          }}</span
          >元
        </template>
      </el-table-column>

      <!-- 变更原因 -->
      <el-table-column prop="reason" label="变更原因" align="center">
      </el-table-column>

      <!-- 审核状态 -->
      <el-table-column label="状态" align="center" width="80px">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '通过'" type="success">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else-if="scope.row.status == '不通过'" type="danger">{{
            scope.row.status
          }}</el-tag>
          <el-tag v-else-if="scope.row.status == '未审核'" type="info">{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column prop="address" label="操作" align="center">
        <template>
          <el-button type="text" size="mini">通过</el-button>
          <el-button type="text" size="mini" style="color: red"
            >不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- table表格 -->
  </div>
</template>

<script>
import { get } from "../../utils/request";
export default {
  data() {
    return {
      // 模糊查询条件申请人编号
      userId:'',
      // 模糊查询条件状态
      status:"",
      // 模糊查询条件时间
      time:'',
      // 模糊查询条件提现类型
      applyType:'',
      // 表格数据
      tableData: [],
      // 查询页数和页码
      list: {
        page: 1,
        pageSize: 10,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    // 根据条件查询
    toQuery(){
      const data = {
        beginTime: new Date(this.time[0]).getTime(),
        endTime: new Date(this.time[1]).getTime(),
        applyType:this.applyType,
        status: this.status,
        userId: this.userId,
        page:1,
        pageSize:10,
      };
      // 格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      console.log(data);
      
      this.currenPage = 1;
      this.findAllAccountApply();
    },

    findAllAccountApply() {
      get("/accountApply/pageQueryAccountApply", this.list,).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.list;
        }
      });
    },
  },
  created() {
    this.findAllAccountApply();
  },
  mounted() {},
};
</script>
<style scoped lang='scss'>
.header {
  display: flex;
  .block {
    margin-right: 10px;
  }
  margin-bottom: 25px;
}
</style>